{% extends "base.html" %}
{%block css%}
<style>
        .branch .branch-proup{
            position: fixed;
            top:0;
            left:0;
            width:100%;
            height:100%;
            background-color: rgba(0,0,0,.2);
            border-radius:5px 5px 0 0;
            display:none;
            z-index:1000;
        }
    </style>
{%endblock css%}

 {%block left-banner%}
{%endblock left-banner%}

{%block title%}
<div class="layui-layout" style="padding-left:20%;text-align:left;top:60px;z-index:1;position: fixed;" >
<text style="font-size:20px">
    测试跟踪
</text>
</div>
{%endblock title%}

  {%block search%}
 <div class="searchBtn" style="text-align:left;top:120px;position: fixed;">
  <div class="layui-inline">
    <input class="layui-input"  name="search_content" id="tableReload" autocomplete="off" data-type="reload">
  </div>
  <button class="layui-btn" data-type="reload" >搜索</button>
           <input type="checkbox" name="status" value="预处理" lay-skin="primary" style="margin-left:20px" checked>预处理  </input>
<input type="checkbox" name="status" value="关闭" lay-skin="primary" style="margin-left:20px">关闭  </input>
<input type="checkbox" name="status" value="开发中" lay-skin="primary" style="margin-left:20px" checked> 开发中  </input>
        <input type="checkbox" name="status" value="重新打开" lay-skin="primary" style="margin-left:20px" checked>  重新打开  </input>
        <input type="checkbox" name="status" value="已解决" lay-skin="primary" style="margin-left:20px" checked> 已解决  </input>
        <button class="layui-btn layui-btn-sm" lay-event="getStatus" id="getStatus" data-type="reload" >按总单状态筛选</button>
     
      <div class="testswitch">
			<input class="testswitch-checkbox" id="onoffswitch" type="checkbox" data-type="reload" name="onoffswitch"
                   lay-event="onoffswitch">
			<label class="testswitch-label" for="onoffswitch">
				<span class="testswitch-inner" data-on="自动汇总条目" data-off="不汇总条目"></span>
				<span class="testswitch-switch"></span>
			</label>
		</div>

    </div>
    {%endblock search%}


{%block body%}
{%load staticfiles%}


<div style="display:flex;position:relative;">
<table class="layui-table" style="text-align:center;padding-top:10px;" lay-data="{ url:'/index/get_index',
page:true, id:'table', skin: 'row', even: true,limits: [10,15,25,35,45,60,75],limit: 10 ,totalRow: true }" lay-filter="table">
  <thead>
    <tr>
      <th lay-data="{field:'issue_key', width:'10%',  sort: true,templet:'#issueTpl',totalRowText: '合计行'}">任务总单</th>
         <th lay-data="{field:'name', width:'30%', sort: true}">任务主题</th>
      <th lay-data="{field:'reporter', width:'8%', sort: true}">测试人</th>
      <th lay-data="{field:'fail', width: '8%', sort: true,totalRow: true}">提测失败</th>
      <th lay-data="{field:'total', width: '8%', sort: true,totalRow: true}">BUG总数</th>
      <th lay-data="{field:'reopen',  width: '8%',sort: true,totalRow: true}">reopen</th>
      <th lay-data="{field:'unsolve', width: '8%',sort: true,totalRow: true}">未解决</th>
        <th lay-data="{field:'unclose', width: '8%',sort: true,totalRow: true}">未关闭</th>
        <th lay-data="{ width: '10%',align: 'center',templet:'#bar'}"/>
    </tr>
  </thead>
</table>

<script>
        layui.use('table', function(){
        var table = layui.table;
        table.init('table',{done:function(res,curr,count){
          merge(res);
        }
        });
      });
      function merge(res) {
        var data = res.data;
        var mergeIndex = 0;//定位需要添加合并属性的行数
        var mark = 1; //这里涉及到简单的运算，mark是计算每次需要合并的格子数
        var columsName = ['issue_key','name'];//需要合并的列名称
        var columsIndex = [0,1];//需要合并的列索引值

        for (var k = 0; k < columsName.length; k++) { //这里循环所有要合并的列
            var trArr = $(".layui-table-body>.layui-table").find("tr");//所有行
                for (var i = 1; i < res.data.length; i++) { //这里循环表格当前的数据
                    var tdCurArr = trArr.eq(i).find("td").eq(columsIndex[k]);//获取当前行的当前列
                    var tdPreArr = trArr.eq(mergeIndex).find("td").eq(columsIndex[k]);//获取相同列的第一列

                    if (data[i][columsName[k]] === data[i-1][columsName[k]]) { //后一行的值与前一行的值做比较，相同就需要合并
                        mark += 1;
                        tdPreArr.each(function () {//相同列的第一列增加rowspan属性
                            $(this).attr("rowspan", mark);
                        });
                        tdCurArr.each(function () {//当前行隐藏
                            $(this).css("display", "none");
                        });
                    }else {
                        mergeIndex = i;
                        mark = 1;//一旦前后两行的值不一样了，那么需要合并的格子数mark就需要重新计算
                    }
                }
            mergeIndex = 0;
            mark = 1;
        }
    }
    </script>
{% verbatim %}

<script type="text/html" id="issueTpl">
  <div><a href="//jira.uyunsoft.cn/browse/{{d.issue_key}}" class="layui-table-link" target="_blank">{{d.issue_key}}</a></div>
</script>
<script type="text/html" id="bar">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="all">全部</a>
  <a class="layui-btn layui-btn-xs" lay-event="10">近十天</a>
</script>

{% endverbatim %}
<script type="text/javascript" src="{% static '/js/echarts.js' %}"></script>
<div class="branch" id="branch">
<div class="branch-proup" >
                    <div id="container"  class="container">
                        </div>
            </div>
        </div>

<script src="{% static '/js/index-table_echarts.js' %}"></script>
</div>
{%endblock body%}
